<script lang='ts' setup>
import { Tab, TabGroup, TabList } from '@headlessui/vue'
import { ref, watchEffect } from 'vue'
import { SvgIcon } from '@/components'
// #2366fd
// #dc00a3
// #ff006d
// #ff7244
// #ffbc3d
// #f9f871

const emits = defineEmits<{
  change: [string]
}>()

const color = defineModel<string>()

const options = [{
  label: '#2366fd',
  value: '#2366fd',
  icon: '',
}, {
  label: '#dc00a3',
  value: '#dc00a3',
  icon: '',
}, {
  label: '#ff006d',
  value: '#ff006d',
  icon: '',
}, {
  label: '#ff7244',
  value: '#ff7244',
  icon: '',
}]

const selectedIndex = ref(0)

function handleChange(index: number) {
  selectedIndex.value = index
  color.value = options?.[selectedIndex.value]?.value
}

watchEffect(() => {
  color.value && emits('change', color.value)
})
</script>

<template>
  <div>
    <TabGroup :selected-index="selectedIndex" @change="handleChange">
      <TabList
        class="inline-flex select-none items-center justify-center rounded-md bg-stone-1 p-1 ring-1 ring-stone-2 dark-bg-stone-9 dark-ring-stone-8"
      >
        <Tab v-for="(option, index) in options" :key="index" v-slot="{ selected }" as="template">
          <button
            class="text-dark. mx-1 w-full inline-flex items-center justify-center gap-1 whitespace-nowrap border-size-0 rounded-md bg-inherit py-1.5 text-sm ring-stone-2 ring-inset dark-text-white focus-outline-none focus-ring-2 dark-ring-stone-8"
            :class="{
              'cursor-default dark-bg-dark-9': selected,
              'cursor-pointer opacity-50 hover-(opacity-100)': !selected,
            }" :style="{ color: selected ? 'white' : option.value, backgroundColor: selected ? option.value : 'white' }"
          >
            <SvgIcon v-if="option.icon" :name="option.icon" class="flex-shrink-0" />
            {{ option.label }}
          </button>
        </Tab>
      </TabList>
    </TabGroup>
  </div>
</template>
